// rem使用

(function (win) {
    var tid;
    $('#header').load('header.html')
    $('#footer').load('footer.html')
    function refreshRem() {
        let designSize = 1920; // 设计图尺寸
        let html = document.documentElement;
        let wW = html.clientWidth; // 窗口宽度
        let rem = wW * 100 / designSize;
        document.documentElement.style.fontSize = rem + 'px';
    }

    win.addEventListener('resize', function () {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener('pageshow', function (e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    refreshRem();

})(window);
// 选项卡
$('.login-tab').find('span').click(function () {
    $(this).attr('id', 'active').siblings().removeAttr('id', 'active')

    let index = $(this).index()

    $(this).parent().siblings('em').eq(index).attr('id', 'on').siblings().removeAttr('id', 'on')
})
// 手机验证码登录
// 请输入11位手机号
var phone = /^[1][3,4,5,7,8][0-9]{9}$/;
var flag1 = false
$('#phoneInput').blur(function () {
    var phoneVal = $(this).val()
    if (phone.test(phoneVal)) {
        flag1 = true;
    } else {
        $('.yz1').show()
        setTimeout(function () {
            $('.yz1').hide();
        }, 2000);
    };
})
// 滑块
var flag4 = false
onload = function () {
    function $(a) {
        return document.querySelector(a); //获取元素的函数
    }
    var oSlider = $(".slider");
    var oBg = $(".slider_bg");
    var oText = $(".labelTip");
    var oBtn = $(".label");
    var success = false; //判断验证是否成功
    var distance = oSlider.offsetWidth - oBtn.offsetWidth; //验证成功的距离
    oBtn.onmousedown = function (eve) {
        oBg.style.transition = "";
        oBtn.style.transition = "";
        var e = eve || window.event;
        var downX = e.clientX; //获取鼠标刚按下时的坐标 相对于浏览器页面
        document.onmousemove = function (eve) {
            var e = eve || window.event;
            var moveX = e.clientX; //获取鼠标移动时的坐标 相对于浏览器页面
            var offsetX = moveX - downX; //物块移动的距离
            if (offsetX > distance) {
                offsetX = distance;
            } else if (offsetX < 0) {
                offsetX = 0;
            }
            oBtn.style.left = offsetX + "px";
            oBg.style.width = offsetX + "px";
            if (offsetX == distance) { //判断验证通过
                oText.innerHTML = "验证成功";
                // oBtn.innerHTML = "√";
                // oText.style.color = "#FFF";
                // oBtn.style.color = "rgb(39, 233, 21)";
                success = true;
                document.onmousemove = null;
                oBtn.onmousedown = null;
            }
        }
    }
    document.onmouseup = function () {
        if (success) { //如果已经验证成功了 那么结束函数
            flag4 = true;
            return;
        } else { //反之 验证没有通过 则物块原来的位置
            oBtn.style.left = 0;
            oBg.style.width = 0;
            oBg.style.transition = "width  ease";
            oBtn.style.transition = "left  ease";
        }
        document.onmousemove = null;
        oBtn.onmouseup = null;
    }
}
// 点击获取验证码操作
$('.get-span').click(function () {
    if (flag4 == true) {
        let count = 60;
        const countDown = setInterval(() => {
            if (count === 0) {
                $('.get-span').text('重新发送').removeAttr('disabled');
                clearInterval(countDown);
            } else {
                $('.get-span').attr('disabled', true);
                $('.get-span').text(count + '秒');
            }
            count--;
        }, 1000);
    } else {
        $('.yz5').show()
        setTimeout(function () {
            $('.yz5').hide();
        }, 2000);
    }
});
// 验证码 4位数字
var yzm = /^\d{4}$/;
var flag6 = false
$('#yzm').blur(function () {
    var yzmVal = $(this).val()
    if (yzm.test(yzmVal)) {
        flag6 = true;
    } else {
        $('.yz6').show()
        setTimeout(function () {
            $('.yz6').hide();
        }, 2000);
    };
})
// 账号密码登录
// 手机号
var phone2 = /^[1][3,4,5,7,8][0-9]{9}$/;
var flag2 = false
$('#phoneInput2').blur(function () {
    var phoneVal2 = $(this).val()
    if (phone2.test(phoneVal2)) {
        flag2 = true;
    } else {
        $('.yz2').show()
        setTimeout(function () {
            $('.yz2').hide();
        }, 2000);
    };
})
// 密码 6-20个字符
var pass = /^.{6,20}$/;
var flag3 = false
$('#passInput').blur(function () {
    var passVal = $(this).val()
    if (pass.test(passVal)) {
        flag3 = true;
    } else {
        $('.yz3').show()
        setTimeout(function () {
            $('.yz3').hide();
        }, 2000);
    };
})
// 账号密码登录
$('#dengLu2').click(function () {
    if (flag2 && flag3) {
        $.ajax({
            url: "../server/login.php",
            type: "post",
            data: {
                username: $('#phoneInput2').val(),
                password: $('#passInput').val()
            },
            success: function (res) {
                let json = JSON.parse(res)
                console.log(json)
                if (json.code === 0) {
                    window.location.href = 'index.html'
                    // console.log(ok)
                } else {
                    console.log(1)
                    $('.yz4').show()
                    setTimeout(function () {
                        $('.yz4').hide();
                    }, 2000);
                }
            }
        })
    }
})
// 手机验证码登录
$('#dengLu1').click(function () {
    if (flag1 && flag4) {
        $.ajax({
            url: "../server/login2.php",
            type: "post",
            data: {
                username: $('#phoneInput').val(),
                // password: $('#passInput').val()
            },
            success: function (res) {
                // let json = JSON.parse(res)
                // console.log(json)
                // if (json.code === 0) {
                //     window.location.href = 'index.html'
                // } else {
                //     $('.yz2').show()
                //     setTimeout(function () {
                //         $('.yz2').hide();
                //     }, 2000);    az
                // }
                window.location.href = 'index.html'
                
            }
        })
    }
})